<style lang="less">

@import '../../styles/common.less';
@import '../../styles/table/table.less';

</style>
<style>
.ivu-table-cell img{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
</style>
<template>

<div>
    <Row class="margin-top-10">
        <Col>
            <Card>
                <p slot="title" style="height:32px;line-height:32px;">
                    <Icon type="android-remove"></Icon>
                    商品管理
                    <Button type="info" style="float:right" icon="android-add"  @click="handleAdd">新增商品</Button>
                </p>
                <div >
                    <can-edit-table :tableLoading='loading' @on-change="handleChange" @on-error="handleError"  refs="table2" v-model="pageData" :columns-list="columns"></can-edit-table>
                </div>
                <Page  style="text-align:center;margin-top:20px" @on-change="getData" :total="pageInfo.total" :page-size="size" :current="pageInfo.current" size="small" show-elevator show-total></Page>
            </Card>
        </Col>

    </Row>
    <Modal :title="imgTitle" v-model="visible">
          <img :src="imgUrl" v-if="visible" style="width: 100%">
    </Modal>
</div>

</template>

<script>

import canEditTable from './components/canEditTable_goods.vue';
import columns from './components/columns_goods.js';
import formatDate from 'utils/time';
import {
  getGoodsPage,
  delCats
} from 'api/lx/lxgoodscats/goods';
import {
  formatDateByLong
} from 'utils/time';
export default {
    name: 'editable-table',
    components: {
        canEditTable
    },
    data() {
        return {
          loading:true,
          page: 1,
          size: 10,
          columns: [
              {
                  title: '#',
                  key: 'goodsId',
                  align: 'center'
              }, {
                  title: '角色名称',
                  key: 'goodsName',
                  align: 'center'
              }, {
                  title: '角色缩略图',
                  key: 'goodsThumb',
                  align: 'center',
                            render: (h, params) => {
                                               return h('div', [
                                                   h('img', {
                                                      // 正常的 HTML 特性
                                                      attrs: {
                                                        src: params.row.goodsThumb
                                                      },
                                                        on: {
                                                            click: () => {
                                                                this.handleView(params.row.goodsName,params.row.goodsThumb)
                                                            }
                                                        }
                                                   })
                                               ]);
                                           }
              }, {
                  title: '售价',
                  key: 'description',
                  align: 'center',
                  render: (h, params) => {
                                     return h('div',"原价："+params.row.marketPrice+"￥;现价："+params.row.shopPrice+"￥");
                                 }
              }, {
                  title: '售出',
                  key: 'sold',
                  align: 'center'
              }, {
                  title: '创建时间',
                  key: 'ctiome',
                  align: 'center',
                  render: (h, params) => {
                                     return h('div',formatDateByLong(params.row.ctime,"yyyy-MM-dd h:m"));
                                 }
              }
              // ,
              // {
              //     title: '操作',
              //     align: 'center',
              //     width: 260,
              //     key: 'handle',
              //     handle: ['info','delete']
              // }
          ],
          pageInfo: '',
          pageData: [],
          imgTitle:'',
          imgUrl: '',
          visible: false
        };
    },
    methods: {
        initColumns () {
            //this.columns = columns;
        },
        getData (page) {
          this.page = page;
          this.loading = true;
          getGoodsPage(page,this.size).then(data => {
            this.loading = false;
            if (data.status === 200) {
              this.pageInfo = data.data;
              this.pageData = data.data.records;
            } else {
              this.$Message.error(data.message);
            }
          }).catch(error => {
              this.$Message.error('服务器异常' + error);
          });
        },
        handleChange (val, index) {
            this.$Message.success('修改了第' + (index + 1) + '行数据');
        },
        handleError (message) {
            this.getData(this.page);
            this.$Message.error(message);
        },
        handleAdd(){
          this.$router.push({
              name: 'goods_add'
          });
        },
        handleView (title,url) {
            this.imgTitle = title;
            this.imgUrl = url;
            this.visible = true;
        }
    },
    created() {
        this.initColumns();
        this.getData(1);
    }
};

</script>
